import { Component, ViewChild } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-contact',
  templateUrl: 'contact.html'
})
export class ContactPage {
  @ViewChild('video_box') video_box
  @ViewChild('video_element') video_ele
  @ViewChild('video_ctrl') video_ctrl
  @ViewChild('progress_box') progress_box
  @ViewChild('progress_bar') progress_bar
  @ViewChild('progress_ctl') progress_ctl
  @ViewChild('download') download
  @ViewChild('full_screen') full_screen
  oVideoBox
  oVideo
  oVideoCtrl
  oProgressBox
  oProgressBar
  oProgressCtl
  oDownload
  oFullScreen
  video_isReady: boolean = false
  // video_src: string = 'https://cc-west-usa.oss-us-west-1.aliyuncs.com/15404832/1313403631687.mp4'
  video_src: string = 'http://122.228.251.158/vcloud1049.tc.qq.com/1049_M0139200001jMHza2ei3OY1001122187.f40.mp4?vkey=E3CE5F8CCB38DCB1C583F4E9D0C71B26416BE84BCDE4BFCD8D6BC7C04E6A345E634345CD14428EADCB22E5C079DD6F6816BBB62B78915143286A2AC197D4F137B0E6CA3B8C85C1D003E93FEA57E90D2A66B00F3BEAB3CFA4'
  video_duration: number = 0 // 返回视频的长度（以秒计）
  video_currentTime: number = 0 // 设置或返回视频中的当前播放位置（以秒计）
  // video_played: TimeRanges // 返回表示视频已播放部分的 TimeRanges 对象
  video_readyState: number = 0 // 返回视频当前的就绪状态[0-4]
  video_progress: number = 0 // 播放进度
  // video_pause: boolean = false // 是否暂停

  start_x: number = 0
  offset_percent: number = 0
  progress_x: number = 0
  increment_x: number = 0
  min_time: number = 0
  max_time: number = 0
  play_timer: number
  is_full_screen: boolean = false

  constructor(public navCtrl: NavController) {
  }

  ionViewDidLoad() {
    this.oVideoBox = this.video_box.nativeElement
    this.oVideo = this.video_ele.nativeElement
    this.oVideoCtrl = this.video_ctrl.nativeElement
    this.oProgressBox = this.progress_box.nativeElement
    this.oProgressBar = this.progress_bar.nativeElement
    this.oProgressCtl = this.progress_ctl.nativeElement
    this.oDownload = this.download.nativeElement
    this.oFullScreen = this.full_screen.nativeElement
    // this.oVideo.onload = ev => {
    //   console.log(ev, this.oVideo.duration)
    // }

    // setInterval(() => {
    //   console.log(this.oVideo.duration)
    // }, 300)

    // setTimeout(() => {
    // this.oVideo.onload = ev => console.log('onload')
    // this.oVideo.onloadstart = ev => console.log('onloadstart')
    // this.oVideo.onloadedmetadata = ev => console.log('onloadedmetadata')
    // this.oVideo.onloadeddata = ev => console.log('onloadeddata')
    // })

    this.initVideo()
  }

  initVideo() {
    // this.getVideoReadyState()
    this.oVideo.onloadeddata = ev => {
      console.log('The video resource is loaded.')
      this.video_isReady = true
      this.video_duration = Math.ceil(this.oVideo.duration) / 100
      this.video_currentTime = this.oVideo.currentTime
      this.getVideoReadyState()
      console.log([this.oVideo])
    }
    // this.oVideoCtrl.ontouchstart = ev => {
    //   this.start_x = ev.touches[0].clientX
    // }
    // this.oVideoCtrl.ontouchmove = ev => {
    //   this.offset_percent = (ev.touches[0].clientX - this.start_x) / window.innerWidth
    // }
    // this.oVideoCtrl.ontouchend = ev => {
    //   console.log('end', ev.touches)
    // }
    this.oVideo.ontimeupdate = ev => {
      this.moveProgressBar()
      // this.video_currentTime = this.oVideo.currentTime.toFixed(2)
      // this.video_progress = Math.ceil(this.video_currentTime / this.video_duration * 100)
    }
    // this.oVideo.onprogress = ev => {
    //   console.log('onprogress')
    // }
    this.oProgressCtl.ontouchstart = ev => {
      this.progress_x = ev.touches[0].clientX
      // let t = this.oVideo.currentTime / this.oVideo.duration
      // this.min_time = 0 - t
      // this.max_time = 1 - t
      // console.log(`min-${this.min_time} | max-${this.max_time}`)
    }
    this.oProgressCtl.ontouchmove = ev => {
      // this.increment_x = ev.touches[0].clientX - this.progress_x
      this.increment_x = ev.touches[0].clientX - this.oProgressBar.getBoundingClientRect().left
      let offset = this.increment_x / this.oProgressBox.offsetWidth
      let nowTime = this.oVideo.duration * offset
      // nowTime >= this.oVideo.duration || nowTime <= 0
      //   ? this.video_pause = this.oVideo.paused
      //   : 
      this.oVideo.currentTime = nowTime
      this.moveProgressBar()
      // console.log(this.oVideo.paused)
    }
    this.oProgressCtl.ontouchend = ev => {
      // console.log(this.oVideo.paused, this.oVideo.played)
      // console.log(this.increment_x / this.oProgressBox.offsetWidth, '----------')
    }
    this.oFullScreen.onclick = ev => {
      // console.log(document.documentElement.requestFullscreen().then(res => console.log(res)))
      // console.log(this.oVideoBox.webkitRequestFullScreen())
      // document.fullscreen ? document.exitFullscreen() : this.oVideoBox.webkitRequestFullScreen()
      if (this.is_full_screen) {
        document['webkitCancelFullScreen']()
        this.is_full_screen = false
      } else {
        this.oVideoBox['webkitRequestFullScreen']()
        this.is_full_screen = true
      }
      // let main = document.body
      // if (main.requestFullscreen) {
      //   main.requestFullscreen()
      // } else if (main.mozRequestFullScreen) {
      //   main.mozRequestFullScreen()
      // } else if (main.webkitRequestFullScreen) {
      //   main.webkitRequestFullScreen()
      // } else if (main.msRequestFullscreen) {
      //   main.msRequestFullscreen()
      // }
    }

    /*
    let handleFullscreen = () => {
      let main = document.body
      if (this.value) {
        if (document.exitFullscreen) {
          document.exitFullscreen()
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen()
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen()
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen()
        }
      } else {
        if (main.requestFullscreen) {
          main.requestFullscreen()
        } else if (main.mozRequestFullScreen) {
          main.mozRequestFullScreen()
        } else if (main.webkitRequestFullScreen) {
          main.webkitRequestFullScreen()
        } else if (main.msRequestFullscreen) {
          main.msRequestFullscreen()
        }
      }
    }
    */

    /*
    let getOffsetLeft = el => {
      let left = 0
      if (el.parentElement) {
        console.log(left += el.parentElement.getBoundingClientRect().left, el.parentElement)
        getOffsetLeft(el.parentElement)
      } else {
        left += el.getBoundingClientRect().left
      }
      return left
    }

    console.log(getOffsetLeft(this.oProgressBar))
    */
  }

  moveProgressBar() {
    this.video_currentTime = Math.ceil(this.oVideo.currentTime) / 100
    // this.video_progress = Math.ceil(this.video_currentTime / this.video_duration * 100)
    this.oProgressBar.style.width = `${(this.oVideo.currentTime / this.oVideo.duration * 100).toFixed(3)}%`
  }

  getVideoReadyState() {
    this.video_readyState = this.oVideo.readyState
    console.log('videoReadyState ->', this.video_readyState)
    return this.video_readyState
  }

  playOrPause() {
    // this.oVideo.paused ? this.oVideo.play() : this.oVideo.pause()
    if (this.getVideoReadyState() !== 4) return
    if (this.oVideo.paused) {
      this.oVideo.play()
      // this.play_timer = setInterval(() => this.moveProgressBar(), 1000/60)
    } else {
      this.oVideo.pause()
      // clearInterval(this.play_timer)
    }

  }

}
